﻿@using Back_end.Models

@{
	ViewBag.Title = "数据报表";
}

@{
	long usersCount = 0, complaintsCount = 0;
	long male = 0, authed = 0;
	long allow = 0, notAllow = 0, processd = 0, processing = 0;
	var dateCount = new Dictionary<string, long>();
	var localDic = new Dictionary<string, long>();

	using (ApplicationDbContext db = new ApplicationDbContext())
	{
		var dateList = from u in db.Users
                       orderby u.RegisterDate
					   select u.RegisterDate;
		foreach (var d in dateList)
		{
			if (dateCount.ContainsKey(d.Date.ToString("yyyy-MM-dd")))
			{ dateCount[d.Date.ToString("yyyy-MM-dd")] += 1; }
			else
			{ dateCount[d.Date.ToString("yyyy-MM-dd")] = 1; }
		}

		usersCount = db.Users.Count();
		complaintsCount = db.Complaints.Count();

		foreach (var u in db.Users)
		{
			if (u.Gender == "男")
			{ ++male; }
			if (u.HadAuthentication == true)
			{ ++authed; }
		}

		foreach (var c in db.Complaints)
		{
			if (c.AllowedPublished == true)
			{ ++allow; }
			else if (c.AllowedPublished == false)
			{ ++notAllow; }

			if (c.HadProcessed == true)
			{ ++processd; }
			else if (c.HadProcessed == false)
			{ ++processing; }

			var province = c.Location.Split(',')[0];
			if (localDic.ContainsKey(province))
			{ localDic[province] += 1; }
			else
			{ localDic[province] = 1; }
		}
	}
}

<style>
	.panel-body {
		height:300px;
	}
</style>

<div id="top"></div>
<div id="navbar-scroll" class="col-md-3">
	<ul class="nav nav-pills nav-stacked" role="tablist" style="position:fixed; width:inherit">
		<li role="presentation" class="active"><a href="#userNumPlane">用户数量</a></li>
		<li role="presentation"><a href="#genderInfoPlane">性别比例</a></li>
		<li role="presentation"><a href="#authInfoPlane">实名认证</a></li>
		<li role="presentation"><a href="#complaintsNumPlane">举报数量</a></ li>
		<li role="presentation"><a href="#complaintsInfoPlane">处理情况</a></li>
	</ul>
</div>
<div class="col-md-9"></div>
<div class="col-md-4"></div>
<div class="col-md-8">
	<div class="panel panel-primary" id="userNumPlane">
		<div class="panel-heading">用户数量</div>
		<div class="panel-body" id="userNum"></div>
		<div class="userConsole"></div>
	</div>
	<div class="panel panel-primary" id="genderInfoPlane">
		<div class="panel-heading">性别比例</div>
		<div class="panel-body" id="genderInfo"></div>
	</div>
	<div class="panel panel-primary" id="authInfoPlane">
		<div class="panel-heading">实名认证人数</div>
		<div class="panel-body" id="authInfo"></div>
	</div>
	<div class="panel panel-primary" id="complaintsNumPlane">
		<div class="panel-heading">举报数量</div>
		<div class="panel-body" id="complaintsNum" style="height:400px"></div>
	</div>
	<div class="panel panel-primary" id="complaintsInfoPlane">
		<div class="panel-heading">举报处理情况</div>
		<div class="panel-body" id="complaintsInfo" style="height: 350px"></div>
	</div>
</div>

<script src="~/Scripts/echarts.js"></script>
<script src="~/Scripts/chart/bar.js"></script>
<script src="~/Scripts/chart/line.js"></script>
<script src="~/Scripts/chart/pie.js"></script>
<script src="~/Scripts/chart/map.js"></script>
<script type="text/javascript">

	require.config({
		paths: {
			echarts: "~/Scripts/chart"
		}
	});

	require(
		[
		'echarts',
		'echarts/chart/line',
		'echarts/chart/bar'
		],
		function (ec) {
			var myChart  = ec.init(document.getElementById('userNum'));

			var option = {
				tooltip : {
					trigger: 'axis'
				},
				legend: {
					data:['注册人数']
				},
				toolbox: {
					show : true,
					feature : {
						mark : {show: true},
						magicType : {show: true, type: ['line', 'bar']},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				},
				calculable : true,
				dataZoom : {
					show : true,
					realtime : true,
					start : 40,
					end : 60
				},
				xAxis : [
					{
						type : 'category',
						boundaryGap : true,
						data : function (){
							var list = [];
							@foreach (var d in dateCount.Keys.Reverse())
							{
								<text>list.push("@d") </text>
							}
							return list;
						}()
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'注册人数',
						type:'line',
						data:function (){
							var list = [];
							@foreach (var d in dateCount.Values.Reverse())
							{
								<text>list.push(@d) </text>
							}
							return list;
						}()
					}
				]
			}

			myChart.setOption(option);
		});
</script>

<script>
	require(
		[
		'echarts',
		'echarts/chart/pie'
		],
		function (ec) {
			var myChart = ec.init(document.getElementById('genderInfo'));

		 	var option = {
		 		tooltip: {
		 			trigger: 'item',
		 			formatter: "{a} <br/>{b} : {c} ({d}%)"
		 		},
		 		legend: {
		 			orient: 'vertical',
		 			x: 'left',
		 			data: ['女', '男']
		 		},
		 		toolbox: {
		 			show: true,
		 			feature: {
		 				mark: { show: true },
		 				restore: { show: true },
		 				saveAsImage: { show: true }
		 			}
		 		},
		 		calculable: true,
		 		series: [
					{
						name: '性别比例',
						type: 'pie',
						radius: ['50%', '70%'],
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							},
							emphasis: {
								label: {
									show: true,
									position: 'center',
									textStyle: {
										fontSize: '20',
										fontWeight: 'bold'
									}
								}
							}
						},
						data: [
							{ value: @(usersCount - male), name: '女' },
							{ value: @male, name: '男' }
						]
					}
		 		]
		 	};

		 	myChart.setOption(option);
		 });
</script>

<script>
	require(
		[
		'echarts',
		'echarts/chart/pie'
		],
		function (ec) {
		 	var myChart = ec.init(document.getElementById('authInfo'));

		 	var option = {
		 		tooltip: {
		 			trigger: 'item',
		 			formatter: "{a} <br/>{b} : {c} ({d}%)"
		 		},
		 		legend: {
		 			orient: 'vertical',
		 			x: 'left',
		 			data: ['未实名认证', '已实名认证']
		 		},
		 		toolbox: {
		 			show: true,
		 			feature: {
		 				mark: { show: true },
		 				restore: { show: true },
		 				saveAsImage: { show: true }
		 			}
		 		},
		 		calculable: true,
		 		series: [
					{
						name: '实名认证比例',
						type: 'pie',
						radius: ['50%', '70%'],
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							},
							emphasis: {
								label: {
									show: true,
									position: 'center',
									textStyle: {
										fontSize: '20',
										fontWeight: 'bold'
									}
								}
							}
						},
						data: [
							{ value: @(usersCount - authed), name: '未实名认证' },
							{ value: @authed, name: '已实名认证' }
						]
					}
		 		]
		 	};

		 	myChart.setOption(option);
		});
</script>

<script>
	require(
	[
	'echarts',
	'echarts/chart/map'
	],
	function (ec) {
		var myChart = ec.init(document.getElementById('complaintsNum'));

		var option = {
			title : {
				text: '举报地区统计',
				subtext: '共计收到' + @complaintsCount + '条'
			},
			tooltip : {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				x:'left',
				data:['举报数量']
			},
			dataRange: {
				min: 0,
				max: @complaintsCount,
				x: 'left',
				y: 'bottom',
				text:['高','低'],           // 文本，默认为数值文本
				calculable : true
			},
			toolbox: {
				show: true,
				orient : 'vertical',
				x: 'right',
				y: 'center',
				feature : {
					mark : {show: true},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			series : [
				{
					name: '举报数量统计',
					type: 'map',
					mapType: 'china',
					roam: false,
					itemStyle:{
						normal:{label:{show:true}},
						emphasis:{label:{show:true}}
					},
					data:[
						{ name:'西藏', value:@{ var v0 = localDic.ContainsKey("西藏") ? localDic["西藏"] : 0; } @v0 },
						{ name:'青海', value:@{ var v1 = localDic.ContainsKey("青海") ? localDic["青海"] : 0; } @v1 },
						{ name:'宁夏', value:@{ var v2 = localDic.ContainsKey("宁夏") ? localDic["宁夏"] : 0; } @v2 },
						{ name:'海南', value:@{ var v3 = localDic.ContainsKey("海南") ? localDic["海南"] : 0; } @v3 },
						{ name:'甘肃', value:@{ var v4 = localDic.ContainsKey("甘肃") ? localDic["甘肃"] : 0; } @v4 },
						{ name:'贵州', value:@{ var v5 = localDic.ContainsKey("贵州") ? localDic["贵州"] : 0; } @v5 },
						{ name:'新疆', value:@{ var v6 = localDic.ContainsKey("新疆") ? localDic["新疆"] : 0; } @v6 },
						{ name:'云南', value:@{ var v7 = localDic.ContainsKey("云南") ? localDic["云南"] : 0; } @v7 },
						{ name:'重庆', value:@{ var v8 = localDic.ContainsKey("重庆") ? localDic["重庆"] : 0; } @v8 },
						{ name:'吉林', value:@{ var v9 = localDic.ContainsKey("吉林") ? localDic["吉林"] : 0; } @v9 },
						{ name:'山西', value:@{ var v10 = localDic.ContainsKey("山西") ? localDic["山西"] : 0; } @v10 },
						{ name:'天津', value:@{ var v11 = localDic.ContainsKey("天津") ? localDic["天津"] : 0; } @v11 },
						{ name:'江西', value:@{ var v12 = localDic.ContainsKey("江西") ? localDic["江西"] : 0; } @v12 },
						{ name:'广西', value:@{ var v13 = localDic.ContainsKey("广西") ? localDic["广西"] : 0; } @v13 },
						{ name:'陕西', value:@{ var v14 = localDic.ContainsKey("陕西") ? localDic["陕西"] : 0; } @v14 },
						{ name:'黑龙江', value:@{ var v15 = localDic.ContainsKey("黑龙江") ? localDic["黑龙江"] : 0; } @v15 },
						{ name:'内蒙古', value:@{ var v16 = localDic.ContainsKey("内蒙古") ? localDic["内蒙古"] : 0; } @v16 },
						{ name:'安徽', value:@{ var v17 = localDic.ContainsKey("安徽") ? localDic["安徽"] : 0; } @v17 },
						{ name:'北京', value:@{ var v18 = localDic.ContainsKey("北京") ? localDic["北京"] : 0; } @v18 },
						{ name:'福建', value:@{ var v19 = localDic.ContainsKey("福建") ? localDic["福建"] : 0; } @v19 },
						{ name:'上海', value:@{ var v20 = localDic.ContainsKey("上海") ? localDic["上海"] : 0; } @v20 },
						{ name:'湖北', value:@{ var v21 = localDic.ContainsKey("湖北") ? localDic["湖北"] : 0; } @v21 },
						{ name:'湖南', value:@{ var v22 = localDic.ContainsKey("湖南") ? localDic["湖南"] : 0; } @v22 },
						{ name:'四川', value:@{ var v23 = localDic.ContainsKey("四川") ? localDic["四川"] : 0; } @v23 },
						{ name:'辽宁', value:@{ var v24 = localDic.ContainsKey("辽宁") ? localDic["辽宁"] : 0; } @v24 },
						{ name:'河北', value:@{ var v25 = localDic.ContainsKey("河北") ? localDic["河北"] : 0; } @v25 },
						{ name:'河南', value:@{ var v26 = localDic.ContainsKey("河南") ? localDic["河南"] : 0; } @v26 },
						{ name:'浙江', value:@{ var v27 = localDic.ContainsKey("浙江") ? localDic["浙江"] : 0; } @v27 },
						{ name:'山东', value:@{ var v28 = localDic.ContainsKey("山东") ? localDic["山东"] : 0; } @v28 },
						{ name:'江苏', value:@{ var v29 = localDic.ContainsKey("江苏") ? localDic["江苏"] : 0; } @v29 },
						{ name:'澳门', value:@{ var v30 = localDic.ContainsKey("澳门") ? localDic["澳门"] : 0; } @v30 },
						{ name:'台湾', value:@{ var v31 = localDic.ContainsKey("台湾") ? localDic["台湾"] : 0; } @v31 },
						{ name:'广东', value:@{ var v32 = localDic.ContainsKey("广东") ? localDic["广东"] : 0; } @v32 },
						{ name:'香港', value:@{ var v33 = localDic.ContainsKey("香港") ? localDic["香港"] : 0; } @v33 },
						{ name:'深圳', value:@{ var v34 = localDic.ContainsKey("深圳") ? localDic["深圳"] : 0; } @v34 }
					]
				}
			]
		};

		myChart.setOption(option);
	});
</script>

<script>

	require(
	[
	'echarts',
	'echarts/chart/pie'
	],
	function (ec) {
		var myChart = ec.init(document.getElementById('complaintsInfo'));

		var option = {
			title : {
				text: '举报处理情况',
				subtext: '审核情况 | 处理情况'
			},
			tooltip : {
				trigger: 'item'
			},
			legend: {
				data:['审核通过','审核中','审核不通过','已处理','处理中','未处理']
			},
			toolbox: {
				show : true,
				feature : {
					mark : {show: true},
					restore : {show: true},
					saveAsImage : {show: true}
				}
			},
			calculable : false,
			series : [
				{
					name:'审核情况',
					type:'pie',
					radius : [0, 85],
					center: [225, 225],
					data: [
						{ value: @allow, name: '审核通过'},
						{ value: @notAllow, name: '审核不通过' },
						{ value: @(complaintsCount - allow -  notAllow), name: '审核中' }
					]
				},
				{
					name: '处理情况',
					type: 'pie',
					radius : [0, 85],
					center: [525, 225],
					data: [
						{ value: @processd, name: '已处理'},
						{ value: @processing, name: '处理中' },
						{ value: @(allow - processd - processing), name: '未处理' }
					]
				}
			]
		};
@*		var lastIndex = 3;
		var axisData;
		clearInterval(timeTicket);
		timeTicket = setInterval(function (){
			lastIndex += 1;
			// 动态数据接口 addData
			myChart.addData([
				[
					0,        // 系列索引
					{         // 新增数据
						name: '随机数据' + lastIndex,
						value: Math.round(Math.random()*10)
					},
					false,     // 新增数据是否从队列头部插入
					false,     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
					'随机数据' + lastIndex
				],
				[
					1,        // 系列索引
					{         // 新增数据
						name: 'data' + lastIndex,
						value: [
							Math.round(Math.random()*100),
							Math.round(Math.random()*100),
							Math.round(Math.random()*100),
							Math.round(Math.random()*100),
							Math.round(Math.random()*100)
						]
					},
					false,     // 新增数据是否从队列头部插入
					false      // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
				]
			]);
		}, 2000);*@

		myChart.setOption(option);
	});
</script>
